<template>
	<div class="All">
		<div class="Manage">
			<!-- 账号 -->
			<div class="acc_num">
				<!-- 账号 -->
				<div class="Account_num">
					<span>账号：</span>
					<span>{{this.IDCard}}</span>
				</div>
				<!-- 密码 -->
				<div class="check_pwd">
					<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="80px"
						class="demo-ruleForm">
						<el-form-item label="原密码" prop="pwd_old">
							<el-input type="password" v-model="ruleForm.pwd_old" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="新密码" prop="pass">
							<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="确认密码" prop="checkPass">
							<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
							<el-button @click="resetForm('ruleForm')">重置</el-button>
						</el-form-item>
					</el-form>
				</div>

			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			let oldPwd = (rule, value, callback) => {
				if (value === '') {
					return callback(new Error('请输入密码'));
				}
				callback();

			};
			let validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else if (value === this.ruleForm.pwd_old) {
					callback(new Error('新密码与原密码一致'));
				} else {
					if (this.ruleForm.checkPass !== '') {
						this.$refs.ruleForm.validateField('checkPass');
					}
					callback();
				}
			};
			let validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.ruleForm.pass) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			return {
				IDCard: '',

				/*
				 * pass:新密码
				 *
				 * pwd_ole:原密码
				 *
				 * checkPass:确认密码
				 *
				 */
				ruleForm: {
					pass: '',
					checkPass: '',
					pwd_old: ''
				},
				rules: {
					pwd_old: [{
						validator: oldPwd,
						trigger: 'blur',
						required: true,
					}],
					pass: [{
						validator: validatePass,
						trigger: 'blur',
						required: true,
					}],
					checkPass: [{
						validator: validatePass2,
						trigger: 'blur',
						required: true,
					}]
				}
			};
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$axios.post('https://vvv.52ecode.cn/api/v1.UserPwdUpdata/index', {
							website_id: 1,
							idcard: this.IDCard,
							pwd: this.ruleForm.pass
						}).then(res => {
							if (res.data.data == '修改成功') {
								this.$message({
									message: '修改成功',
									type: 'success'
								});
							} else {
								this.$message.error('修改失败');
							}
						}).catch(err => {
							console.log(err);
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			}
		},
		created() {
			this.IDCard = JSON.parse(sessionStorage.getItem('InfoMation')).idcard
			this.ruleForm.pwd_old = JSON.parse(sessionStorage.getItem('InfoMation')).pwd
		}
	}
</script>

<style lang="scss" scoped>
	.All {
		background-color: #f2f4f7;
		padding: 30px;

		.Manage {
			display: flex;
			align-items: center;
			flex-direction: column;

			.acc_num {
				.check_pwd {
					width: 400px;
				}

				.Account_num {
					margin: 20px 0;
				}
			}

			background-color: #fff;
			padding: 20px;
			border-radius: 20px;
		}
	}
</style>
